{% extends 'base.html' %}
{% block main %}
  <div class="unit-3-4 unit-1-on-mobile top-gap">
    <div class="bg-white card">
      <div class="flex-left flex-wrap units-gap-big p-7">
        {% for tutorial in tutorial_list %}
          <div class="unit-1-3 unit-1-on-mobile">
            <div class="card">
              <div class="card-image">
                {% if tutorial.cover %}
                  <a href="{% url 'blog:category_slug' tutorial.slug %}">
                    <img class="" src="{{ tutorial.cover_thumbnail.url }}" alt="">
                  </a>
                {% endif %}
              </div>
              <div class="card-body">
                <a href="{% url 'blog:category_slug' tutorial.slug %}">{{ tutorial }}</a>
                <div class="text-small text-muted mt-3">
                  <span>{{ tutorial.total_views.category_views }}次阅读</span>
                  {% if tutorial.status == 2 %}
                    <span class="float-right" style="color: red">
                                        <i class="fa fa-check-circle-o"
                                           aria-hidden="true"></i> 已完成</span>
                  {% else %}
                    <span class="float-right" style="color: green">
                                        <i class="fa fa-check-circle-o"
                                           aria-hidden="true"></i> 进行中</span>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
{% endblock main %}